<template>
  <Row v-if="model.slaves.length">
    <Col class="field-group ivu-col" v-for="(slave,index) in model.slaves" v-if="model.layout!=='tab'" :key="index">
    <Col class="field-label" :span="slaveLabelCol">
    <label>
      {{ slave.name}}
    </label>
    </Col>
    <Col class="field-input" :span="slaveControlCol">
    <component :module="'slave_'+slave.code" :is="slaveComponent(slave)"></component>
    </Col>
    </Col>
    
    <Col class="field-group field-group-tabs" v-if="model.layout==='tab'">
    <Tabs :value="model.slaves[0] && model.slaves[0].code">
      <TabPane :label="slave.name" :name="slave.code" v-for="(slave,index) in model.slaves" :key="index" :data-code="slave.code">
        <component :module="'slave_'+slave.code" :is="slaveComponent(slave)" :model="slave"></component>
      </TabPane>
    </Tabs>
    </Col>
  </Row>
</template>

<script>
  import SlaveList from "./slaveList/index";
  import AttachmentList from "@/components/attachmentList/index";
  import TableEditor from "@/components/gridTableEditor/index";
  export default {
    subModuleStore: true,
    props: {
      col: {
        default: 2
      }
    },
    data() {
      return {};
    },
    computed: {
      slaveLabelCol() {
        return 2;
      },
      slaveControlCol() {
        return 22;
      }
    },
    methods: {
      slaveComponent(slave) {
        if (slave.enable_attachment) {
          return "attachmentList";
        } else if (slave.type === "editor") {
          return "tableEditor";
        } else {
          return "SlaveList";
        }
      }
    },
    components: {
      SlaveList,
      AttachmentList,
      TableEditor
    }
  };

</script>

<style>


</style>
